<template>
	<el-dialog title="日志详情" :visible.sync="visible" width="992px" top="0" append-to-body custom-class="system_log_dialog">
		<el-descriptions :column="3" border class="system_log_detail">
			<el-descriptions-item label="模块名称">{{ data.moduleName }}</el-descriptions-item>
			<el-descriptions-item label="操作状态">
				<el-tag size="small" :type="data.level | logLevelColorFilter">{{ data.level | logLevelFilter }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="请求方式">
				<el-tag size="small" :type="data.requestType === 'POST' ? 'success' : ''">{{ data.requestType }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="请求地址" :span="3">{{ data.actionUrl }}</el-descriptions-item>
			<el-descriptions-item label="操作方法" :span="3">{{ data.classPath }}</el-descriptions-item>
			<el-descriptions-item label="请求参数" :span="3">{{ data.requestParam }}</el-descriptions-item>
			<el-descriptions-item label="操作用户">{{ data.createAccount }} / {{ data.ipAddr }}</el-descriptions-item>
			<el-descriptions-item label="操作时间" :span="2">{{ data.startTime }}</el-descriptions-item>
		</el-descriptions>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">关闭</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	props: {
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			visible: this.value
		};
	},
	filters: {
		logLevelFilter(data) {
			switch (data) {
				case '1':
					return '成功';
				case '2':
					return '错误';
			}
		},
		logLevelColorFilter(data) {
			switch (data) {
				case '1':
					return 'success';
				case '2':
					return 'danger';
			}
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	}
};
</script>
<style lang="scss">
.system_log_dialog .el-dialog__body {
	padding: 0;
}
</style>
<style lang="scss" scoped>
.system_log_detail {
	flex: 1;
	margin: 12px;
	overflow: hidden;
	&:deep(.el-descriptions-item__label) {
		width: 84px;
		font-size: 15px;
	}
	dl {
		display: flex;
		align-items: flex-start;
		padding: 12px;
		line-height: 24px;
	}

	dt {
		flex-shrink: 0;
		overflow: hidden;
	}
}
</style>
